
@import  "reset.css";
html,body{
    height: 100%;
    width: 100%;
}
body{
    overflow: hidden;
    position: absolute;
}
img{
    border:none;
}
#loading {
    display:block;
    background:#1a1a1a url(../images/loading.gif) center no-repeat;
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:999999;
}
#loading p {
    width:100%;
    height:2.1333rem;
    text-align:center;
    position:absolute;
    top:50%;
    margin-top:-0.64rem;
    left:0;
    font-family: Arial, Helvetica, sans-serif;
    font-size:1.5em;
    color:#999;
    z-index:999999999;
}
.bigbox{
    width: 100%;height: 100%;overflow:hidden;transition: 1s;
}
.page{
    float: left;width: 100%;height: 100%;display: none;
}

/*首页*/
.start{
    background-image: url(../images/bg1_2.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: block;
}

.roll-text .txt {
    width: 8.6rem;
    position: absolute;
    top: 23.5%;
    left: 50%;
    margin-left: -4.3rem;
}
.roll-text .txt2 {
    display: none;
    width: 7rem;
    margin-left: -3.5rem;
}
.roll-text .txt3 {
    display: none;
    width: 5.9rem;
    margin-left: -2.95rem;
}
.logo {
    width: 4rem;
    position: absolute;
    top: 3.5%;
    left: 50%;
    margin-left: -2rem;
}

.start .pic_3_2 {
    width: 8.4rem;
    position: absolute;
    top: 2rem;
    left: 50%;
    margin-left: -4.2rem;
}

.start .icon_1_1{
    width: 3.8rem; 
    position: fixed;
    bottom: 2%;
    left: 50%;
    margin-left: -1.9rem;
    mix-blend-mode: overlay;
    z-index: 1;
    filter: gray;
    transition: all 4s ease;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: 0.1;
}

.start .icon_1_1_1 {
    filter: none;
    opacity: 1;
}

.start .icon_1_2{
    width: 14rem;
    position: fixed;
    bottom: 4.68rem;
    left: 50%;
    margin-left: -7rem;
}

.start .icon_1_3{
    display: none;
    width: 3.8rem; 
    position: fixed;
    bottom: 2.9%;
    left: 50%;
    margin-left: -1.9rem;
    mix-blend-mode: overlay;
    z-index: 1;
    -webkit-animation: shake 5s .2s linear infinite alternate;
}
@-webkit-keyframes shake{
0%,100%{-webkit-transform:translateX(0);}
10%,30%,50%,70%, 90%{-webkit-transform:translateY(-8px);}
20%,40%,60%,80%{-webkit-transform:translateY(8px);}
}

.start .icon_1_5{
    display: none;
    width: 4.6rem; 
    position: fixed;
    bottom: 7.5%;
    left: 50%;
    margin-left: -2.3rem;
    mix-blend-mode: overlay;
}

.start .icon_1_4{
    position: fixed;
    bottom: -2.4rem;
    width: 100%;
    mix-blend-mode: overlay;
}


/* 关注页 */
.page1{
    background-image: url(../images/bg2.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
}

.page1 img {
    position: absolute;
}

.page1 .pic_2_2 {
    width: 5.58rem;
    top: 45.5%;
    left: 50%;
    margin-left: -2.79rem;
}

.page1 .pic_2_1 {
    width: 8.24rem;
    top: 26%;
    left: 50%;
    margin-left: -4.12rem;
}

.page1 .pic_2_3 {
    width: 15.22rem;
    bottom: -1.3rem;
    left: 50%;
    margin-left: -7.66rem;
}

.page2 {
    background-image: url(../images/bg4.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.bottom-text{
    position:absolute;
    left:0.5rem;
    bottom:0.2rem;
    font-size: 0.4rem;
}

.page2 .bg_pic{
    position:absolute;
    width: 14.6rem;
    top: 4.6rem;
    left: 50%;
    margin-left: -7.3rem;
}

.page2 .pic_3_1{
    mix-blend-mode: overlay;
}

.page2 .pic_3_2{
    filter: gray;
    transition: all 6s ease;

    -webkit-filter: grayscale(100%);

    -moz-filter: grayscale(100%);

    -ms-filter: grayscale(100%);

    -o-filter: grayscale(100%);

    filter: grayscale(100%);

    opacity: 0.66;
}

.page2 .pic_3_2_1 {
    filter: none;
    opacity: 1;
}

.page2 .pic_3_3{
    width: 8.2rem;
    top: 11.7rem;
    margin-left: -4.3rem;
}

.page2 .pic_3_4{
    display: none;
    position: absolute;
    width: 19.7rem;
    top: 0.29rem;
    left: -18.2%;
}

.page2 .pic_3_8{
    position: absolute;
    bottom: 13.5%;
    width: 7rem;
    left: 50%;
    margin-left: -3.5rem;
}

.page2 .pic_3_6{
    display: none;
    position: absolute;
    bottom: 6.5%;
    width: 1.5rem;
    left: 50%;
    margin-left: -0.75rem;
    -webkit-animation: shake 5s .2s linear infinite alternate;
}

.page2 .pic_3_9{
    display: none;
    position: absolute;
    bottom: 12.5%;
    width: 6rem;
    left: 50%;
    margin-left: -3rem;
}

.page2 .pic_3_7{
    position: absolute;
    width: 3.8rem;
    bottom: 0.5%;
    left: 50%;
    margin-left: -1.9rem;
    opacity: 0.6;
}

.page2 .pic_3_7_no_click{
    -webkit-animation: twinkling 1.3s .2s linear infinite alternate;
}

.page2 .pic_3_7:active {
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
  mix-blend-mode: color-dodge;
}

@-webkit-keyframes twinkling{ 
    from {opacity:0.6;-webkit-transform:scale(1)}
    to {opacity:1;-webkit-transform:scale(1.2)}
} 

.page2 .cout-down-txt{
    display: none;
    margin-top: 34%;
    color: #4a3d3c;
    font-size: xx-large;
    text-align: center;
    font-weight: 600;
}

.page2 .bg_color{
    position:absolute;
    width: 19rem;
    top: 21%;
    left: -1.5rem;
    filter: gray;
    transition: all 5s ease;

    -webkit-filter: grayscale(100%);

    -moz-filter: grayscale(100%);

    -ms-filter: grayscale(100%);

    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: 0.66;
}

.page2 .bg_color:hover {
    filter: none;
    opacity: 1;
}


.page3 {
    background-image: url(../images/bg4.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.page3 .box-bg{
    position: absolute;
    width: 11.6rem;
    top: 21%;
    left: 50%;
    margin-left: -5.8rem;
    mix-blend-mode: overlay;
}

.page3 .result {
    display: none;
    position: absolute;
    width: 8.8rem;
    top: 19.8%;
    left: 48.2%;
    margin-left: -4.4rem;
}

.page4_1 {
    background-image: url(../images/bg5.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.page4_2 {
    background-image: url(../images/bg6.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.page4_3 {
    background-image: url(../images/bg7.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.page4_4 {
    background-image: url(../images/bg8.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.ending {
    display: none;
    width: 8.6rem;
    position: absolute;
    top: 28%;
    left: 50%;
    margin-left: -4.3rem;
}

.page_end .pic_2_3 {
    position: absolute;
    width: 15.22rem;
    bottom: -1.3rem;
    left: 50%;
    margin-left: -7.66rem;
}

.page_end .icon_top {
    position: absolute;
    width: 6.82rem;
    top: 17%;
    left: 50%;
    margin-left: -3.41rem;
    mix-blend-mode: overlay;
}

@-webkit-keyframes bounceIn{
    0%{opacity:0;-webkit-transform:scale(.3)}
    50%{opacity:1;-webkit-transform:scale(1.05)}
    70%{-webkit-transform:scale(.9)}
    100%{-webkit-transform:scale(1)}
}



















